
 <template>
  <view >
  	<view class="user-name">
		<image :src="userlist.avatarUrl == '' ? 'https://img1.baidu.com/it/u=3268812645,3909879450&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500' : userlist.avatarUrl" mode="aspectFill" ></image>
		<text @click="loGin" :class="userlist.nickName == '' ? 'split-new' : 'disabled'">{{userlist.nickName == '' ? '登陆' : userlist.nickName}}</text>
  	   <!-- <image :src="userlist.avatarUrl == '' ? 'https://img1.baidu.com/it/u=3268812645,3909879450&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500' : userlist.avatarUrl" mode="aspectFill"></image> -->
  	   <!-- <text @click="loGin" :class="userlist.nickName == '' ? 'split-new' : 'disabled'">{{userlist.nickName == '' ? '登陆' : userlist.nickName}}</text> -->
  	 </view>
  	<view class="infor_mation">
  	   <view v-for="(item,index) in information" :key="index">
  	     <text>{{item.number}}</text>
  	     <text>{{item.title}}</text>
  	   </view>
  	 </view>
  	 <view class="my-order">
  	   <view v-for="(item,index) in orderData" :key="index" @click="orderRoute(item.path)">
  	     <image :src="item.icon"></image>
  	     <text>{{item.title}}</text>
  	   </view>
  	 </view>
  </view>
 </template>
 
 <script >
 export default {
 	data() {
 		return {
          userlist:{
			  avatarUrl:'',
			  nickName:''
		  },
		  information:[
		    {
		      number:5,
		      title:'健康分'
		    },
		    {
		      number:5,
		      title:'优惠券'
		    },
		    {
		      number:5,
		      title:'消息'
		    }
		  ],
		  orderData:[
		    {
		      icon:'/static/mine/jiuzhenren.svg',
		      title:'就诊人管理',
		      path:'/pages/my-service/my-patient/my-patient'
		    },
		    {
		      icon:'/static/mine/guahao.svg',
		      title:'我的挂号',
		      path:'/pages/my-service/my-registration/index'
		    },
		    {
		      icon:'/static/mine/xinguanyimiao.svg',
		      title:'新冠疫苗',
		      path:'/pages/my-service/xinguan/index'
		    },
		    {
		      icon:'/static/mine/hpvyimiao.svg',
		      title:'HPV疫苗',
		      path:'/pages/my-service/hpv-view/index'
		    },
		    {
		      icon:'/static/mine/hesuan.svg',
		      title:'核酸检测',
		      path:'/pages/my-service/nucleic-acid/index'
		    },
		    {
		      icon:'/static/mine/tijianbaogao.svg',
		      title:'我的体检',
		      path:'/pages/my-service/phy-exam/index'
		    }
		  ]
		  
 		}
 	},
 	onShow() {
		let wxUser = uni.getStorageSync('wxuser')
		if(!wxUser){
		  this.userlist.avatarUrl = ''
		 this.userlist.nickName = ''
		}else{
		this.userlist.avatarUrl = wxUser.avatarUrl
		this.userlist.nickName = wxUser.nickName
		}
 		
 	},
 	
 	methods: {
		// 点击登录
		loGin(){
			uni.navigateTo({
				url:'/pages/login/index'
			})
		
		}
 	   
 	}
 }
 
 </script>
 
 
 <style>
   page{
       background: linear-gradient(to bottom,#e3efff 30%, #f6f6f6 40%);
   }
   /* 昵称 */
   .user-name{
     display: flex;
     flex-direction: column;
     align-items: center;
     font-weight: bold;
     font-size: 35rpx;
   }
   .user-name image{
     width: 80rpx;
     height: 80rpx;
     display: block;
     border-radius: 50%;
     border: 5rpx solid #ffffff;
     margin-bottom: 10rpx;
   }
   /* 三个排列 */
   .infor_mation view{
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   .infor_mation{
     display: flex;
     justify-content: space-around;
     font-weight: bold;
     margin: 50rpx 0;
   }
   .infor_mation text{
     padding-bottom: 15rpx;
   }
   /* 我的订单 */
   .my-order{
     background-color: #ffffff;
     border-radius: 20rpx;
     margin: 0 20rpx 20rpx 20rpx;
     display: flex;
     flex-wrap: wrap;
     font-size: 28rpx;
   }
   .my-order image{
     width: 60rpx;
     height: 60rpx;
     margin-bottom: 25rpx;
   }
   .my-order view{
     display: flex;
     flex-direction: column;
     align-items: center;
     width: calc(25% - 20rpx*2);
     margin: 20rpx;
   }
   /* 未登陆的背景 */
   .split-new{
     background: #0176ff;
     color: #ffffff;
     border-radius: 10rpx;
     padding: 10rpx 50rpx;
   }
   /* 禁用点击 */
   .disabled{
     pointer-events: none;
   }
   </style>